﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>文件上传测试</title>
    <script src="Scripts/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //上传单文件
        function uploadSingleFile() {
            var use = document.uploadFile.use.value;
            var description = document.uploadFile.description.value;
            var formFile = document.uploadFile.formFile.files[0];

            var form = new FormData();
            form.append("use", use);
            form.append("description", description);
            form.append("formFile", formFile);

            $.ajax({
                url: "http://localhost:49871/Api/Load/UploadFile",
                type: "POST",
                data: form,
                contentType: false, //禁止设置请求类型
                processData: false, //禁止jQuery对DATA的处理，FormData已经做了处理
                success: function (response) {
                    alert(JSON.stringify(response));
                }
            });
        }

        //上传多文件
        function uploadMultiFiles() {
            var use = document.uploadFiles.use.value;
            var description = document.uploadFiles.description.value;
            var formFiles = document.uploadFiles.formFiles.files;

            var form = new FormData();
            form.append("use", use);
            form.append("description", description);
            for (var i = 0; i < formFiles.length; i++) {
                form.append("formFiles", formFiles[i]);
            }

            $.ajax({
                url: "http://localhost:49871/Api/Load/UploadFiles",
                type: "POST",
                data: form,
                contentType: false, //禁止设置请求类型
                processData: false, //禁止jQuery对DATA的处理，FormData已经做了处理
                success: function (response) {
                    alert(JSON.stringify(response));
                }
            });
        }

        //下载文件
        function downloadFile() {
            var fileId = "CD05E6C4-B195-4221-8CC2-BEEC3A79D2F5";
            var url = "http://localhost:49871/Api/Load/DownloadFile?fileId=" + fileId;
            window.open(url);
        }
    </script>
</head>
<body>
    <h2>上传单文件</h2>
    <form name="uploadFile" enctype="multipart/form-data">
        <p>用途：<input type="text" name="use" /></p>
        <p>描述：<input type="text" name="description" /></p>
        <p>文件：<input type="file" name="formFile" /></p>
        <p><input type="button" value="提交" onclick="uploadSingleFile();" /></p>
    </form>
    <hr />
    <hr />
    <h2>上传多文件</h2>
    <form name="uploadFiles" enctype="multipart/form-data">
        <p>用途：<input type="text" name="use" /></p>
        <p>描述：<input type="text" name="description" /></p>
        <p>文件列表：<input type="file" name="formFiles" multiple="multiple" /></p>
        <p><input type="button" value="提交" onclick="uploadMultiFiles();" /></p>
    </form>
    <hr />
    <hr />
    <h2>下载文件</h2>
    <p><input type="button" value="下载" onclick="downloadFile();" /></p>
</body>
</html>
